$(function () {
	const layer = layui.layer;
	const $image = $('#image');
	// 配置选项
	const options = {
		// 长宽比
		aspectRatio: 1,
		// 指定预览区域
    preview: '.img-preview',
    // 视图模式
		viewMode: 2,
	};

	// 创建裁剪区域
	$image.cropper(options);
	// 文件选择框
	$('#btnChooseImage').on('click', function () {
		$('#file').click();
	});
	// 文件选择框绑定change事件
	$('#file').on('change', function (e) {
		console.log(e);
		// target属性  files为伪数组的属性
		const fileList = e.target.files;
		if (fileList.length === 0) {
			return layer.msg('请选择照片！');
		}
		// 获取到文件 改变路径
		// const file = e.target.files[0];
		// 将文件转化为路径
		const imgURL = URL.createObjectURL(fileList[0]);
		// 销毁旧图  渲染裁剪新的图片
		$image
			.cropper('destroy') //销毁旧的裁剪区域
			.attr('src', imgURL) // 重新设置图片路径
			.cropper(options); // 重新初始化裁剪区域
	});

	$('#updateAvatar').on('click', function () {
		// 需要把拿的图片放在Canvas画布内容 转化为base64字符串格式(适合处理小图片)
		const dataURL = $image
			.cropper('getCroppedCanvas', {
				// 创建画布
				width: 100,
				hight: 100
			})
			.toDataURL('image/png');
		$.ajax({
			method: 'POST',
			url: '/my/update/avatar',
			data: {
				avatar: dataURL
			},
			success(res) {
				if (res.status !== 0) {
					return layer.msg('更换头像失败！');
				}
				layer.msg('更换头像成功！');
				// 加载父级函数重新渲染页面
				window.parent.getUserInfo();
			}
		});
	});
});
